<script setup>
   import { ref, watch } from 'vue';
//导入axios发送请求
import request  from "../axios/axios"
//导入user数据
import {userInfoStore} from '../stores/UserInfoPinaStores.js'



//定义寝室查询名字
let dormitoryName=ref("")
//定义寝室信息展示变量
let showDormitoryName=ref("")
//宿舍id
let showDormitoryId=ref("")
//宿舍费用
let showDormitoryFee=ref("")






async function queryDormitory(){
    //用户寝室信息查询
    console.log(dormitoryName.value)
    let {data} = await request.get("/checkDormitoryName"
        ,
        {
            params:{
                dormitorynname:dormitoryName.value
            }
        }
    )
//根据状态码返回结果
        console.log(data)
    if(data.statusCode==205){
        let dormitoryInfo=data.data;
        console.log(dormitoryInfo);
        //变更信息
        showDormitoryId.value=dormitoryInfo.dormitoryId
        showDormitoryName.value=dormitoryInfo.dormitoryName
        showDormitoryFee.value=dormitoryInfo.dormitoryMonkey
    }else{
        alert("查询失败")
    }
}
</script>

<template>
    管理员宿舍信息管理页面
    查询
         <div class="Dormitory">
            <div class="DormitoryName">
               
                    寝室信息查询<input type="text" v-model="dormitoryName" /><button @click="queryDormitory()">查询</button>
            </div>
            <div style="width: 100%; height: 80%;">
                <!-- 寝室信息展示 -->
                <table style="width: 100%; height: 100%;">
                    <tr class="trb">
                        <td class="name">寝室ID</td ><td class="content" v-text="showDormitoryId"></td> 
                    </tr>
                    <tr class="trb">
                        <td class="name">寝室名字</td ><td class="content" v-text="showDormitoryName" ></td>
                    </tr>

                    <tr class="trb">
                        <td class="name">寝室水电费</td ><td class="content" v-text="showDormitoryFee"></td>
                    </tr>           
                </table>
            </div>
        </div>
</template>

<style scoped>
   
.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
